<!DOCTYPE html>
<html>
	 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <div id="app">
			  {{message}}   <br/>
			  <input type="text" v-model="message" />  <br/>
			   {{sayHello()}}   <br/>
			   
			   <!-- v-if 如果隐藏的话，使用F12在里边查看的话，会看不到html的内容
			        v-show 如果隐藏的话，使用F12可以看到html的内容 style="display: none;"  多了一个样式 
			   -->
			   <div v-if="seen">
				   你看到我了   v-if
			   </div>
			   <div v-show="seen">
				      你看到我了   v-show
			   </div>
			   
			   
			   <div v-if="flag">
				 flag是  true
			   </div>
			   <div v-else> 
				  flag是 false
			   </div>
			 
			   <span v-if="gender==0"> 男</span>
			   <span v-else-if="gender==1"> 女</span>
			   <span v-else>未知</span>      
				<br/>
				
				<template v-if="flag">
					 <p>hello  vue</p>
                      <div>hello  javaBoy</div>					
				</template>  <br/>
				v-for循环结果:
				<div v-for=" item in items">
					{{item.text}}
				</div>
				   <br/>
				   九九乘法表 
				   <div v-for="i in numb">
					    <span v-for="j in i"> {{j}} * {{i}}  =  {{j * i}} &nbsp;&nbsp;&nbsp;&nbsp; </span> 
				   </div>
				   <br/>
				   优化九九乘法表  可以根据输入的值来控制长度  <br/>
				   v-model	String	将输入值作为字符串处理，即使输入的是数字。 <br/>
				   v-model.number	Number	尝试将输入值转换为数字。如果失败，则保留为字符串。 <br/>
				   <input type="number" v-model.number="num" />
				   
				   <div v-for="i in num">
				   		  <span v-for="j in i"> {{j}} * {{i}}  =  {{j * i}} &nbsp;&nbsp;&nbsp;&nbsp; </span> 
				   </div>
				   
				   <div v-for="book in books">
					   {{book.author}} >> {{book.name}}
				   </div>
				   
				   v-for 可以通过一个对象的属性来迭代数据： v是value(第一个参数)  key是名称(第二个参数)  i指的是下标(第三个参数) 
				   <div v-for="(v,k,i) in site">
				       {{v}} >>> {{k}} >>>>>{{i}}		   
				   </div>
				   
				   
			 
		 </div>
	</body>
	<script>
		var app =new Vue({
			el:"#app",
			data:{
				message:"hello Vue222",
				site:"菜鸟",
				seen:true,
				flag:true,
				gender:0,
				numb:9,
				num:9,
				items: [
				      { text: '学习 JavaScript' },
				      { text: '学习 Vue' },
				      { text: '整个牛项目' }
				    ],
					 books: [
					                {
					                    name: '三国演义',
					                    author: '罗贯中'
					                }, {
					                    name: '红楼梦',
					                    author: '曹雪芹'
					                }, {
					                    name: '西游记',
					                    author: '吴承恩'
					                }, {
					                    name: '水浒传',
					                    author: '施耐庵'
					                }
					            ],
					            site: {
					                url: 'www.javaboy.org',
					                name: '江南一点雨',
					                server: 'github'
					            }
			},
			methods:{
				sayHello:function(){
					 return  this.site + " - 学的不仅是技术，更是梦想！";
				},
			},
			
			
		});
		
		
	</script>
</html>
